<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import { requestAllRankingList } from '../../utils/axiosURL'
import defaultImg from "../../assets/logo.png";

// 存储官方榜单数据
const saveOfficialRankingData = reactive<any>([])
// 存储全球榜单数据
const saveGlobalRankingData = reactive<any>([])

// 所有榜单
const requestAllRankingListFn = () => {
  requestAllRankingList().then((data: any) => {
    saveOfficialRankingData.values = data.list.slice(0, 4)
    saveGlobalRankingData.values = data.list.splice(4, data.list.length - 1)
  }).catch(_ => { })
}

// 注册局部自定义指令
const vLazy = {
  mounted(el: HTMLImageElement, binding: any) {
    // el表示使用指令的DOM元素
    // bindings表示指令相关的信息是一个对象 如v-lazy="xxx",bindling即是xxx对应的内容
    // 指令的功能：实现图片的懒加载
    // 1、监听图片是否进入可视区
    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
      // true；进入可视区域，false：未进入可视区域
      if (isIntersecting) {
        // 1、给图片的src属性赋值图片的地址
        el.src = binding.value
        // 2、取消图片的监听，默认是会一直监听的，如果不取消。就会一直执行
        observer.unobserve(el)
        // 3、加载的图片失败了，显示默认的图片地址
        el.onerror = () => {
          el.src = defaultImg
        }
      }
    }, {
      threshold: 0
    })
    observer.observe(el)
  },
};


onMounted(() => {
  requestAllRankingListFn()
})

</script>


<template>
  <div class="RankingList">
    <div class="officialList">
      <p class="officialListTitle">官方榜</p>
      <RankingLegendItem
          v-if="saveOfficialRankingData.values.length !== 0"
          v-for="item in saveOfficialRankingData.values"
          :coverImgUrl="item.coverImgUrl"
          :id="item.id"
          :name="item.name"
      />
      <OfficialListSkeleton v-else v-for="item in 4" />
    </div>

    <div class="globalList">
      <p class="globalListTitle">全球榜</p>
      <div class="globalListWrap">
        <div class="globalListItem" v-for="item in saveGlobalRankingData.values" v-if="saveOfficialRankingData.values.length !== 0">
          <div class="topImg">
            <RouterLink :to="`/SongListDetail/${item.id}`">
              <img class="bkImg" v-lazy="item.coverImgUrl" alt="">
            </RouterLink>
            <RouterLink :to="`/SongListDetail/${item.id}`">
              <div class="centerIcon">
                <img src="../../assets/playimg.png" alt="">
              </div>
            </RouterLink>
            <div class="playcount">
              <span class="iconfont icon-24gl-play"></span>
              <span>
                {{
                  item.playCount >= 10000
                      ? Math.ceil(item.playCount / 10000000) + '亿'
                      : item.playCount >= 10000
                          ? Math.ceil(item.playCount / 10000) + '万'
                          : item.playCount
                }}
              </span>
            </div>
          </div>
          <RouterLink :to="`/SongListDetail/${item.id}`">
            <p class="btmDesc">{{ item.name }}</p>
          </RouterLink>
        </div>
        <GlobalListItemSkeleton v-else v-for="item in 10" />
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.RankingList {
  width: 100%;
  height: 93%;
  padding: 0 0 80px 0;
  box-sizing: border-box;
  overflow: auto;

  .officialList {
    width: 100%;

    .officialListTitle { @extend .moduleTitle; margin-bottom: 20px; }
  }

  .globalList {
    width: 100%;

    .globalListTitle { @extend .moduleTitle; margin-bottom: 20px; }

    .globalListWrap {
      display: flex;
      flex-wrap: wrap;
      width: 100%;

      .globalListItem {
        width: 18%;
        margin: 0 12px 12px 0;

        .topImg {
          position: relative;
          width: 100%;
          height: 140px;

          .bkImg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 6px;
          }

          .centerIcon {
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 45px;
            height: 45px;
            background-color: #fff;
            border-radius: 50%;

            img {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 4px;
              margin: auto;
              transform: scale(2);
            }
          }

          .playcount {
            position: absolute;
            top: 0px;
            right: 8px;

            span {
              color: $theme-white;
              font-size: $font-size-xs;
            }
          }

          &:hover .centerIcon {
            display: block;
          }
        }

        .btmDesc {
          font-size: $font-size-sm;
          color: $font_main_color;
          font-family: $textFont;
          line-height: 30px;
        }
      }
    }
  }
}

/* // 歌单图片响应式设置 */
@media screen and (min-width: 1100px) {
  .topImg {
    height: 150px !important;
  }
}

@media screen and (min-width: 1130px) {
  .topImg {
    height: 157px !important;
  }
}

@media screen and (min-width: 1160px) {
  .topImg {
    height: 162px !important;
  }
}

@media screen and (min-width: 1190px) {
  .topImg {
    height: 164px !important;
  }
}

@media screen and (min-width: 1220px) {
  .topImg {
    height: 170px !important;
  }
}

@media screen and (min-width: 1250px) {
  .topImg {
    height: 176px !important;
  }
}

@media screen and (min-width: 1280px) {
  .topImg {
    height: 182px !important;
  }
}

@media screen and (min-width: 1310px) {
  .topImg {
    height: 188px !important;
  }
}

@media screen and (min-width: 1340px) {
  .topImg {
    height: 194px !important;
  }
}

@media screen and (min-width: 1370px) {
  .topImg {
    height: 200px !important;
  }
}

@media screen and (min-width: 1400px) {
  .topImg {
    height: 206px !important;
  }
}

@media screen and (min-width: 1430px) {
  .topImg {
    height: 210px !important;
  }
}
</style>
